{% extends 'base.html' %}

{% block title %}子项目数据导入{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row justify-content-center">
        <div class="col-lg-8">
            <div class="card">
                <div class="card-header">
                    <h4 class="mb-0">
                        <i class="fas fa-upload me-2"></i>子项目数据导入
                    </h4>
                </div>
                <div class="card-body">
                    <!-- 导入说明 -->
                    <div class="alert alert-info">
                        <h6><i class="fas fa-info-circle me-2"></i>导入说明：</h6>
                        <ul class="mb-0">
                            <li>请先下载子项目导入模板，按照模板格式填写数据</li>
                            <li>支持的文件格式：.xlsx、.xls</li>
                            <li>带*号的字段为必填项，不能为空</li>
                            <li>所属项目名称必须是系统中已存在的项目</li>
                            <li>负责人用户名必须是系统中已存在的用户</li>
                            <li>子项目预算不能超过父项目的剩余预算</li>
                            <li>项目状态可选：初始、立项通过、中期检查通过、结项完成</li>
                        </ul>
                    </div>

                    <!-- 模板下载 -->
                    <div class="mb-4">
                        <a href="{% url 'common:subproject_template' %}" class="btn btn-outline-success">
                            <i class="fas fa-file-download me-1"></i>下载子项目导入模板
                        </a>
                    </div>

                    <!-- 文件上传表单 -->
                    <form id="importForm" enctype="multipart/form-data">
                        {% csrf_token %}
                        <div class="mb-3">
                            <label for="excel_file" class="form-label">选择Excel文件：</label>
                            <input type="file" class="form-control" id="excel_file" name="excel_file" 
                                   accept=".xlsx,.xls" required>
                            <div class="form-text">请选择.xlsx或.xls格式的Excel文件</div>
                        </div>
                        
                        <div class="d-grid gap-2">
                            <button type="submit" class="btn btn-success" id="importBtn">
                                <i class="fas fa-upload me-1"></i>开始导入
                            </button>
                        </div>
                    </form>

                    <!-- 进度显示 -->
                    <div id="progressContainer" class="mt-4" style="display: none;">
                        <div class="progress">
                            <div class="progress-bar bg-success progress-bar-striped progress-bar-animated" 
                                 role="progressbar" style="width: 100%">
                                正在处理...
                            </div>
                        </div>
                    </div>

                    <!-- 结果显示 -->
                    <div id="resultContainer" class="mt-4" style="display: none;">
                        <div id="resultAlert" class="alert">
                            <div id="resultMessage"></div>
                            <div id="errorList" style="display: none;">
                                <hr>
                                <h6>错误详情：</h6>
                                <ul id="errors"></ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-footer">
                    <a href="{% url 'common:excel_management' %}" class="btn btn-secondary">
                        <i class="fas fa-arrow-left me-1"></i>返回Excel管理
                    </a>
                    <a href="{% url 'subprojects:subproject_list' %}" class="btn btn-outline-success ms-2">
                        <i class="fas fa-list me-1"></i>查看子项目列表
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
document.getElementById('importForm').addEventListener('submit', function(e) {
    e.preventDefault();
    
    const fileInput = document.getElementById('excel_file');
    const importBtn = document.getElementById('importBtn');
    const progressContainer = document.getElementById('progressContainer');
    const resultContainer = document.getElementById('resultContainer');
    
    if (!fileInput.files[0]) {
        alert('请选择要导入的Excel文件');
        return;
    }
    
    // 显示进度条
    progressContainer.style.display = 'block';
    resultContainer.style.display = 'none';
    importBtn.disabled = true;
    importBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i>导入中...';
    
    // 创建FormData
    const formData = new FormData();
    formData.append('excel_file', fileInput.files[0]);
    formData.append('csrfmiddlewaretoken', document.querySelector('[name=csrfmiddlewaretoken]').value);
    
    // 发送请求
    fetch('{% url "common:import_subprojects" %}', {
        method: 'POST',
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        // 隐藏进度条
        progressContainer.style.display = 'none';
        
        // 显示结果
        const resultAlert = document.getElementById('resultAlert');
        const resultMessage = document.getElementById('resultMessage');
        const errorList = document.getElementById('errorList');
        const errors = document.getElementById('errors');
        
        if (data.success) {
            resultAlert.className = 'alert alert-success';
            resultMessage.innerHTML = `<i class="fas fa-check-circle me-2"></i>${data.message}`;
            
            if (data.errors && data.errors.length > 0) {
                errorList.style.display = 'block';
                errors.innerHTML = '';
                data.errors.forEach(error => {
                    const li = document.createElement('li');
                    li.textContent = error;
                    errors.appendChild(li);
                });
            } else {
                errorList.style.display = 'none';
            }
        } else {
            resultAlert.className = 'alert alert-danger';
            resultMessage.innerHTML = `<i class="fas fa-exclamation-circle me-2"></i>${data.message}`;
            
            if (data.errors && data.errors.length > 0) {
                errorList.style.display = 'block';
                errors.innerHTML = '';
                data.errors.forEach(error => {
                    const li = document.createElement('li');
                    li.textContent = error;
                    errors.appendChild(li);
                });
            } else {
                errorList.style.display = 'none';
            }
        }
        
        resultContainer.style.display = 'block';
    })
    .catch(error => {
        console.error('Error:', error);
        progressContainer.style.display = 'none';
        
        const resultAlert = document.getElementById('resultAlert');
        const resultMessage = document.getElementById('resultMessage');
        
        resultAlert.className = 'alert alert-danger';
        resultMessage.innerHTML = '<i class="fas fa-exclamation-circle me-2"></i>导入失败，请重试';
        resultContainer.style.display = 'block';
    })
    .finally(() => {
        // 恢复按钮状态
        importBtn.disabled = false;
        importBtn.innerHTML = '<i class="fas fa-upload me-1"></i>开始导入';
    });
});
</script>
{% endblock %}